<template>
  <div class="news">
    <h2 class="title">
      最新推荐
    </h2>
    <div class="list">
      <router-link
        v-for="item in data"
        :key="`${item._type}-${item.id}`"
        :to="item._type === 'song' ? { name: 'LibrarySong', params: { songId: item.id } }:{ name: 'LibraryAlbum', params: { albumId: item.id } }"
      >
        <ResCard
          v-if="item._type === 'song'"
          :type="item._type"
          :title="item.title"
          :img="item.belongsToAlbum.coverImage"
        >
          <div
            slot="sub-title"
            class="sub-title"
          >
            <router-link
              v-for="artist in item.belongsToArtists"
              :key="'artist-' + artist.id"
              :to="{ name: 'LibraryArtist', params: { artistId: artist.id } }"
            >
              {{ artist.name }}
            </router-link>
          </div>
        </ResCard>

        <ResCard
          v-else-if="item._type === 'album'"
          :type="item._type"
          :img="fullUrl(item.coverImage)"
          :title="item.title"
        >
          <div
            slot="sub-title"
            class="sub-title"
          >
            <router-link
              v-for="artist in item.belongsToArtists"
              :key="'artist-' + artist.id"
              :to="{ name: 'LibraryArtist', params: { artistId: artist.id } }"
            >
              {{ artist.name }}
            </router-link>
          </div>
        </ResCard>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Song, Album, getSongs, getAlbums } from '@/api'
import { cdn } from '@/utils'
import { Merge } from 'ts-essentials'
import * as _ from 'lodash'
import ResCard from '../components/ResCard.vue'

type TypeMerged<T> = Merge<T, {_type: string}>

@Component({
  name: 'TreadNews',
  components: {
    ResCard
  }
})
export default class extends Vue {
  @Prop({ default: 0 }) page!: number;
  private data: (TypeMerged<Song> | TypeMerged<Album>)[] = []

  private fullUrl (path: string) {
    return cdn(path)
  }

  created () {
    this.handleRequest()
  }

  private async handleRequest () {
    this.data = []

    // 加载7个最新歌曲
    const songs = await getSongs({
      join: [
        { field: 'belongsToArtists', select: ['id', 'name', 'images'] },
        {
          field: 'belongsToAlbum',
          select: ['id', 'title', 'coverImage', 'publishDate']
        }
      ],
      sort: [
        { field: 'createdAt', order: 'DESC' },
        { field: 'belongsToAlbum.publishDate', order: 'DESC' }
      ],
      filter: [
        { field: 'visible', operator: 'eq', value: true }
      ],
      limit: 7
    })
    const songsWithTypeMark = (songs.data as Song[]).map<TypeMerged<Song>>(song => {
      return {
        ...song,
        _type: 'song'
      }
    })
    this.data = this.data.concat(songsWithTypeMark)

    // 加载3个最新专辑
    const albums = await getAlbums({
      join: [
        { field: 'belongsToArtists', select: ['id', 'name', 'images'] }
      ],
      sort: [
        { field: 'createdAt', order: 'DESC' },
        { field: 'publishDate', order: 'DESC' }
      ],
      filter: [
        { field: 'visible', operator: 'eq', value: true }
      ],
      limit: 3
    })
    const albumsWithTypeMark = albums.data.map<TypeMerged<Album>>(album => {
      return {
        ...album,
        _type: 'album'
      }
    })
    this.data = this.data.concat(albumsWithTypeMark)

    this.data = _.shuffle(this.data)
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.title {
  &::before {
    content: "";
    display: inline-block;
    background: white;
    width: 3px;
    height: 1em;
    position: relative;
    bottom: -3px;
    left: -3px;
  }
}

.list {
  column-count: 3;
  column-gap: 0;
  @media (min-width: 1350px) {
    column-count: 4;
  }
  @media (min-width: 1600px) {
    column-count: 5;
  }
  & > a {
    display: block;
    break-inside: avoid;
    box-sizing: border-box;
    margin: 0 16px 16px 16px;
    .res-card {
      break-inside: avoid;
      max-width: 220px;
      border-radius: 8px;
      overflow: hidden;
    }
    &:hover {
      box-shadow: 6px 6px 6px #202020;
    }
  }
}
</style>
